<template>
    <div class="box">
        <h2>Son2 子组件</h2>
        从vuex中获取的值:<label>{{ count }}</label>
        <br/>
        <button @click="subCount(1)">值 - 1</button>
        <button @click="subCount(5)">值 - 5</button>
        <button @click="subCount(10)">值 - 10</button>
        <button @click="changeTitle('好好好')">改标题</button>
    </div>
</template>

<script>
import {mapMutations, mapState} from 'vuex'

export default {
    name: 'Son2Com',
    computed: {
        ...mapState(['count'])
    },
    methods: {
        // 使用 mapMutations 可以将 mutations 中的函数映射到 methods 中
        // 直接使用 this.xxx 调用即可（或者页面之中直接使用），为了简化代码
        ...mapMutations(['subCount', 'changeTitle'])
        // handleSub (n) {
        //   // this.$store.commit('subCount', n)
        //   this.subCount(n)
        // }
    }
}
</script>

<style lang="css" scoped>
.box {
    border: 3px solid #ccc;
    width: 400px;
    padding: 10px;
    margin: 20px;
}

h2 {
    margin-top: 10px;
}
</style>
